<template>
    <view class="box">
        <div class="mx-nav" v-if="info.list && info.list.length > 0" :style="{
            'padding': `0 ${info.padding / 2}px`
        }">
            <div class="nav-box" :style="{
            'background-color': info.bg_color
        }">
                <div class="nav-scroll">
                    <div class="nav-content">
                        <div class="card" v-for="(item, index) in info.list" :key="index">
                            <div class="nav-item">
                                <img class="item-img" :src="$imgUrl + item.img" />
                                <div class="itme-txt" :style="{
            'color': info.txt_color
        }">
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <empty icon="Picture" name="导航金刚模块" />
        </div>
    </view>
</template>

<script setup>
import empty from '../empty.vue'

const props = defineProps({
    info: { required: true },
});
</script>

<style scoped lang="scss">
.mx-nav {
    width: 100%;
}

.nav-box {
    border-radius: 8px;
    // background-color: #fff;
    height: 165px;
}

.nav-scroll {
    width: 100%;
    height: auto;
    box-sizing: border-box;


    .nav-content {
        width: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 155px;

        .card {
            width: 70px;
            height: 75px;
            // border: 1px solid #f00;
            text-align: center;
            position: relative;

            .nav-item {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
            }

            .item-img {
                width: 50px;
                height: 50px;
            }

            .itme-txt {
                font-size: 11px;
                color: #1f1f1f;
                margin-top: 3px;
            }
        }
    }
}
</style>
